import { Callout, Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Picker

A generic picker that allows an item to be selected. It is composed of one or more wheels, optionally with separators
between those wheels.

The picker supports arrow key navigation:

- Up/Down arrows: Increment/decrement selected value
- Left/Right arrows: Move between wheels

Recommended for touch devices.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.picker/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='picker' query={{}}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        const FPicker(
          children: [
            FPickerWheel(
              children: [
                Text('January'),
                Text('February'),
                Text('March'),
                Text('April'),
                Text('May'),
                Text('June'),
                Text('July'),
                Text('August'),
                Text('September'),
                Text('October'),
                Text('November'),
                Text('December'),
              ],
            ),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create picker
```

## Usage

### `FPicker(...)`

```dart copy
const FPicker(
  controller: FPickerController(initialIndexes: []),
  style: FPickerStyle(...),
  onChange: (indexes) {},
  children: [
    FPickerWheel(
      flex: 2,
      loop: true,
      itemExtent: 20,
      autofocus: true,
      focusNode: FocusNode(),
      onFocusChange: (focused) {},
      children: [
        Text('1'),
        Text('2'),
      ],
    ),
    FPickerWheel.builder(
      flex: 2,
      itemExtent: 20,
      autofocus: true,
      focusNode: FocusNode(),
      onFocusChange: (focused) {},
      builder: (context, index) => Text('$index'),
    ),
  ],
);
```

## Examples

### Loop

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='picker' query={{loop: 'true'}}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart {4} copy
        const FPicker(
          children: [
            FPickerWheel(
              loop: true,
              children: [
                Text('January'),
                Text('February'),
                Text('March'),
                Text('April'),
                Text('May'),
                Text('June'),
                Text('July'),
                Text('August'),
                Text('September'),
                Text('October'),
                Text('November'),
                Text('December'),
              ],
            ),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>

### Lazy

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='picker' query={{builder: 'true'}}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart {3-5} copy
        FPicker(
          children: [
            FPickerWheel.builder(
              builder: (context, index) => Text('$index'),
            ),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>

### Multiple Wheels

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='picker' variant='multiple'/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        SizedBox(
          width: 200,
          child: FPicker(
            children: [
              const FPickerWheel(
                flex: 3,
                loop: true,
                children: [
                  Text('January'),
                  Text('February'),
                  Text('March'),
                  Text('April'),
                  Text('May'),
                  Text('June'),
                  Text('July'),
                  Text('August'),
                  Text('September'),
                  Text('October'),
                  Text('November'),
                  Text('December'),
                ],
              ),
              FPickerWheel.builder(
                flex: 2,
                builder: (context, index) => Text('${(index % 31) + 1}'),
              ),
            ],
          ),
        );
        ```
    </Tabs.Tab>
</Tabs>

### With Separators

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='picker' variant='separator'/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart {8} copy
        SizedBox(
          width: 200,
          child: FPicker(
            children: [
              FPickerWheel.builder(
                builder: (context, index) => Text((index % 12).toString().padLeft(2, '0')),
              ),
              const Text(':'),
              FPickerWheel.builder(
                builder: (context, index) => Text((index % 60).toString().padLeft(2, '0')),
              ),
              const FPickerWheel(
                children: [
                  Text('AM'),
                  Text('PM'),
                ],
              ),
            ],
          ),
        );
        ```
    </Tabs.Tab>
</Tabs>
